<template>
    <div class="box advanced">
        <a-collapse ghost>
            <a-collapse-panel header="高级参数">
                <a-space direction="vertical" style="width: 100%">
                    <a-flex align="center" class="advanced-item">
                        <div class="label">--seed 种子</div>
                        <a-input v-model:value="advanced.seed" placeholder="0-4294967295" :bordered="false" />
                    </a-flex>
                    <a-flex align="center" class="advanced-item">
                        <div class="label">--s 风格化</div>
                        <div class="value">
                            <a-slider v-model:value="advanced.s" :max="1000"></a-slider>
                        </div>
                    </a-flex>
                    <a-flex align="center" class="advanced-item">
                        <div class="label">--c 多样性</div>
                        <div class="value">
                            <a-slider v-model:value="advanced.c" :max="100"></a-slider>
                        </div>
                    </a-flex>
                    <a-flex align="center" class="advanced-item">
                        <div class="label">--quality 质量</div>
                        <div class="value" style="padding: 0">
                            <a-select v-model:value="advanced.quality" :bordered="false">
                                <a-select-option value="0.25">0.25x</a-select-option>
                                <a-select-option value="0.5">0.5x</a-select-option>
                                <a-select-option value="1">1x-默认</a-select-option>
                            </a-select>
                        </div>
                    </a-flex>
                    <a-flex align="center" class="advanced-item">
                        <div class="label">--weird 奇妙</div>
                        <div class="value">
                            <a-slider v-model:value="advanced.weird" :max="3000"></a-slider>
                        </div>
                    </a-flex>
                    <a-flex align="center" class="advanced-item">
                        <div class="label">--stop 停止</div>
                        <div class="value">
                            <a-slider v-model:value="advanced.stop" :max="100"></a-slider>
                        </div>
                    </a-flex>
                    <a-flex align="center" class="advanced-item">
                        <div class="label">--title 无缝图片</div>
                        <div class="value">
                            <a-switch v-model:checked="advanced.title"></a-switch>
                        </div>
                    </a-flex>
                </a-space>
            </a-collapse-panel>
        </a-collapse>
    </div>
</template>
<script setup lang="ts">
import { reactive, watch } from "vue";
const advanced = reactive<{ [key: string]: string | number | boolean }>({
    seed: 0,
    s: 100,
    c: 0,
    quality: "1",
    weird: 0,
    stop: 100,
    title: false,
});
const emits = defineEmits(["change"]);

const getCommand = () => {
    const command: Array<{ text: string; type: string; close: boolean }> = [];
    Object.keys(advanced).forEach((key) => {
        let value = advanced[key];
        if (value) {
            let text = `-- ${key} ${value}`;
            if (key === "title") {
                text = `-- ${key}`;
            }
            command.push({
                text: text,
                type: key,
                close: false,
            });
        }
    });
    return command;
};

watch(advanced, () => {
    emits("change", getCommand());
});
</script>
<style lang="less" scoped>
.advanced-item {
    border-radius: 6px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.1);
    .label {
        flex-shrink: 0;
        text-align: right;
        line-height: 32px;
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        width: 110px;
        box-sizing: border-box;
        padding-right: 10px;
    }
    .value {
        width: 100%;
        padding: 0 10px;
    }
    :deep(.ant-slider) {
        .ant-slider-track {
            background-color: #3c89e8;
        }
        .ant-slider-handle::after {
            background-color: #ffff;
            box-shadow: 0 0 0 2px #fff;
        }
    }
    :deep(.ant-select-single) {
        width: 100%;
    }
}
</style>
